<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <!-- 适配移动端的显示 -- 移动端布局 视窗 -->
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <title>电影网站后台管理系统</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body,
    #app {
      height: 100%;
      background: rgb(244, 244, 244);
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  </style>
</head>

<body>
  <!-- vue中所有的组件它解析成html后，都会挂载到当前的app节点中 -->
  <!-- 但是像弹出层，它如果在此节点中，就可能破坏原有的页面的结构，从而让css产生影响，让页面布局出现问题 -->
  <div id="app"></div>
  <!-- 
    综上面所述，可以另行一个节点，让弹出层在另一个节点中展示，这样就不会破坏原来的页面结构，而效果也会出现
    但是现在使用的是单页面使用，在main.js中只能new一个Vue实例，而vue中规定只有在实例配置中才能有el或$mount绑定节点的方法,为了实例下面的要求，vue给我们提供一个类的继承 Vue.extend，来创建一个组件，它就可以被实例化，从而就会有el或$mount绑定节点的配置
  -->
  <div id="dialog"></div>
</body>

</html>